<template>
  <div class="box">
    <!-- 商品类型 -->
      <ul class="goodtype">
          <li v-for="(type, index) in types" :key="index" class="li" :id="type.id">
              <a :href="'#box' + index" :class="{current: indx == index }" @click="typeFn(index)">{{type.name}}</a>
          </li>
      </ul>
    <!-- 商品展示 -->
      <div class="Box">
        <lunbo1 class="lunbo1"> </lunbo1>
        <lunbo2 class="lunbo2"> </lunbo2>
        <!-- 商品 -->
        <div class="goodList">
              <compone v-for="(good,index) in goodslist"  class="compone" :id='"box"+index' :typeID="good.id" :key="index" :goodlist="goodslist"> </compone>      
        </div>
      </div>
 </div>
</template>

<script>
import axios from 'axios';
import lunbo1 from "./lunbo1.vue";
import lunbo2 from "./lunbo2.vue";
import compone from "./compone.vue";
export default {
  name: "OrderMenu-goodtype",
  data: function () {
    return {
      indx: 0,
      types: [],
      goodslist: [
        {
          ID:1, 
          name:"人气必喝榜", 
          img: "./img/7.png",
          title: "多肉芒芒甘露",
          have: "含乳制品茶",
          desc: "冷标准怀500ml;冷加大MAX杯650ml人气Top2多肉芒芒甘露",
          price: 27,
        },
        {
          ID:2, 
          name:"每日必喝",
          img: "./img/7.png",
          title: "可做热饮",
          have: "含乳制品茶",
          desc: "冷热皆宣冷/8500ml人气Top原创生打椰椰奶冻仅选用优质生",
          price: 23,
        },
        { 
          ID:3, 
          name:"满杯红柚",
          img: "./img/7.png",
          title: "满杯红柚",
          have: "可做热饮含茶",
          desc: "冷热皆宜冷650ml热500ml人",
          price: 29,
        },
        { ID:4,   
          img: "./img/7.png",
          title: "烤黑糖波波牛乳",
          have: "可做热饮",
          desc: "冷热皆宜7480ml热500mlTop7黑波波措配順滑冷藏牛乳",
          price: 28,
        },
        { ID:5, 
          img: "./img/7.png",
          title: "芝芝芒芒●",
          have: "含乳制品、茶",
          desc: "冷标准怀500ml;冷加大MAX杯650ml人气Top2多肉芒芒甘露",
          price: 25,
        },
      ],
    };
  },
  // 数据挂载后dom渲染时
  created(){
    //  商品类型
      axios.post("http://x3e7eb.natappfree.cc/goods/findAllSort")
      .then(res=>{
          this.types=res.data.data
          console.log(this.types);

      });
  },
    //  商品列表
      // axios.post(getGoodsList.php)
      // .then(res=>{
      //     this.goodslist=res1.data;
      // })
  //  },
  methods: {
    typeFn(index) {
      this.indx = index;
      // axios.post(getGoodsListNew.php,
      //    {data:"typeID="+typeID})
      // .then(res=>{
      //      console.log(res1.data);
      //     this.goodslist=res1.data;
      // })
    },
  },
  components: {lunbo1,lunbo2,compone},
};
</script>

<style scoped>
@import url(../../assets/Menus/iconfont/iconfont.css);
.box {
  width: 375px;
  display: flex;
  position: relative;
  justify-content: space-between;
}
.goodtype {
  width: 88px;
  height: 450px;
  overflow: auto;
  position: fixed;
  top: 160px;
  background-color: #f6f6f6;
}
.goodtype::-webkit-scrollbar{
    display: none;
}
.goodtype .li {
  width: 88px;
  height: 35px;
  line-height: 35px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.goodtype .li a {
  width: 88px;
  display: block;
  height: 35px;
}
.Box {
  overflow: auto;
  width: 250px;
  height: 450px;
   position: fixed;
  top: 160px;
  right: 0;
}
.Box::-webkit-scrollbar{
    display: none;
}
.Box .lunbo1,
.lunbo2 {
  width: 250px;
  height: 145px;
}
.Box .lunbo2 {
  margin-top: 10px;
}
.Box .goodList {

  width: 250px;
  background-color: rgb(223, 138, 27);
}
.goodList .compone{
    width: 100%;
    margin-bottom: 30px;
    background-color: rgb(22, 201, 76);}
.current {
  color: red;
  background-color: blanchedalmond;
}
</style>
